<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>14.2.1-Teleport 组件要解决的问题</title>
</head>

<body>
    <div id="app">
        <!-- // 参考用例 -->
        <template>
            <Teleport to="body">
                <div class="overlay"></div>
            </Teleport>
        </template>
    </div>
    <style scoped>
        .overlay {
            z-index: 9999;
        }
    </style>
</body>
    
    <script src="https://unpkg.com/@vue/reactivity@3.0.5/dist/reactivity.global.js"></script>
    <script>
        /**
         * Teleport 组件是 Vue.js 3 新增的一个内建组件，我们首先讨论它要解决的问题是什么。
         * - 该组件可以将指定内容渲染到特定容器中，而不受 DOM 层级的限制。
         * - 为 Teleport 组件指定渲染目标 body，
         *    即 to 属性的值，该组件就会直接把它的插槽内容渲染到 body 下，
         *    而不会按照模板的 DOM 层级来渲染，于是就实现了跨 DOM 层级的渲染
         * 
         * 参考上面例子
         * */ 
    </script>
    

</html>